<template>
  <div>
    <van-sticky>
      <van-nav-bar title="个人"></van-nav-bar>
    </van-sticky>
    <van-row>
      <van-col span="22" offset='1' class="personal-card">
        <div class="card-img"></div>
        <div class="card-text">{{stateJudge(this.$store.state.username)}}</div>
      </van-col>      
    </van-row>
    <van-row>
      <van-col span='22' offset='1' class="personal-content">
        {{stateJudge(this.$store.state.token)}} | {{stateJudge(this.$store.state.password)}} | {{stateJudge(this.$store.state.salt)}}
      </van-col>
    </van-row>
    <van-row>
      <van-col span="22" offset="1">
        <van-cell title='登录' @click='toLogin' is-link></van-cell>
        <van-cell title='书架' @click="unrealized" is-link></van-cell>
        <van-cell title='个人设置' @click='unrealized' is-link></van-cell>
        <van-cell title='购买记录' @click='unrealized' is-link></van-cell>
        <van-cell title='关于' @click='unrealized' is-link></van-cell>
        <van-cell title='退出' @click='quit' is-link></van-cell>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'Personal',
  components: {
  },
  methods: {
    // 跳转到登录
    toLogin() {
      if(this.$store.state.username == '') {
        this.$router.push('login')
      } else {
        this.$toast.fail('您已登录')
      }
    },
    // 功能未实现提示
    unrealized() {
      this.$toast.fail('功能未实现')
    },
    // 退出登录
    quit() {
      if(this.$store.state.username != '') {
        this.$dialog.confirm({
          message: '是否退出登录',
        })
        .then(() => {
            this.$store.dispatch('cleanState')
            this.$toast.success('已退出')
        }).catch(() => {
        })
      } else {
        this.$toast.fail('未登录')
      }
    },
    // 状态判断, 用来用户是否已登录
    stateJudge(name) {
      return name != '' ? name : '--'
    }
  },
}
</script>

<style lang='scss' scoped>
/* @import url(); 引入css类 */
.personal-card {
  height: 22vh;
  // background-image: linear-gradient(rgba(25, 137, 250, .8) 60%, #ddd);
  background-color: #fff;
  // border-radius: 0 0 15px 15px;
  margin-top: 3vh;
  // margin-bottom: 3vh;
  /* box-shadow: 0 5px rgba(110, 110, 110, .5); */
  .card-img {
    width: 80px;
    height: 80px;
    // border: 1px solid #000;
    border-radius: 50%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -80%);
    background-image: url('../../assets/img/logo.png');
    background-color: #ddd;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: 10px;
    margin-top: 10px;
  }
  .card-text {
    position: relative;
    width: 50vw;
    left: 50%;
    top: 24%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
}

.personal-content {
  background-color: #fff;
  text-align: center;
  border-radius: 0 0 15px 15px;
  padding-top: 1vh;
  padding-bottom: 3vh;
  margin-bottom: 6vh;
  color: rgba($color: #666666, $alpha: .8);
}

</style>
